<template>
	<div class="max oh">
		<my-header :backBtn="true">
			<div slot="title">
				家长缴费
			</div>
		</my-header>
		<div class="cont-nof" style="background-color: #F8F8F8;">
			<template v-if="productList.length>0">
				<div class="product_title">
					请选择相关套餐进行缴费：
				</div>
				<div class="flex product_list">
					<div class="product_item" v-for="item in productList" @click="selectItem(item)">
						<div class="month pr">
							一个月
							<div class="checkbox-tick" :class="{'checked':item.id==product.id}">
								<i class="weui-icon-checked"></i>
							</div>
							<div class="hot" v-if="item.hot">
								<img src="../../../static/img/hot.png" alt="">
							</div>
						</div>
						<div class="pro_cont">
							<div class="money " :class="{'hotColor':item.hot}"><span style="font-size: 2rem;">￥</span>{{item.lastMoney}}</div>
							<div class="typeDesc">
								享受{{item.typeDesc}}天服务
							</div>
							<div class="typeDesc" v-if="item.discount<10">
								享{{item.discount}}折，劲省{{parseFloat(item.initMoney-item.lastMoney).toFixed(1)}}元
							</div>
						</div>
					</div>
				</div>
				<div class="prePay" style="background: #36C12D;" @click="prePayFn" v-if="product.id!=null">￥{{product.lastMoney}} 确认缴费</div>
				<div class="prePay" v-else>请先选择套餐</div>
			</template>
			<template v-else>
				<div class="max oh" style="background: #FFFFFF;">
					<div class="weui-loadmore phone-tip">
						<img src="../../../static/img/fufei.png" alt="">
						<div>
							暂无缴费项目
						</div>
					</div>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	import wx from 'weixin-js-sdk';

	export default {
		name: "Product",
		data() {
			return {
				productList: [],
				product: {
					id: null
				},
				typeList: [{
						type: 'month',
						desc: '月'
					},
					{
						type: 'term',
						desc: '学期'
					},
					{
						type: 'year',
						desc: '学年'
					},
					{
						type: 'customize',
						desc: 'customize'
					},
				],
			}
		},
		methods: {
			getWxConfig() {
				let url = window.location.href;
				this.$http.getWxConfig({
					url: url
				}).then(resp => {
					wx.config({
						//debug: true,
						appId: resp.data.appId,
						timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
						signature: resp.data.sign, // 必填，签名
						jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
					});
					wx.ready(function() {

					});
					wx.error(function(res) {
						console.log(res)
					});
				})
			},
			prePayFn() {
				if (!this.product) {
					this.$weui.topTips('选择金额');
					return;
				}
				this.$http.getPerPay({
					productId: this.product.id,
					money: this.product.initMoney
				}).then(resp => {
					let _this = this;
					wx.chooseWXPay({
						debug: true,
						appId: resp.data.appId,
						timestamp: resp.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: resp.data.nonceStr, // 支付签名随机串，不长于 32 位
						package: resp.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: resp.data.paySign, // 支付签名
						success: function(res) {
							// 支付成功后的回调函数，确切说用户点击了完成按钮后返回
							if (res.errMsg === "chooseWXPay:ok") {
								_this.$router.push('/myself')
								// wx.closeWindow();
							}
						},
						fail: function(res) {
							console.log(res)
						}
					});
				})
			},
			getProduct() {
				this.$http.getProduct().then(resp => {
					this.productList = resp.data;
				})
			},

			selectItem(product) {
				this.product = product;
			},
		},

		mounted() {
			this.getWxConfig();
			this.getProduct();
		}
	}
</script>
<style scoped>
	.product_title {
		text-align: left;
		margin: 1.5rem 0 1.5rem 1rem;
		color: rgba(16, 16, 16, 1);
		font-size: 1.6rem;
	}

	.product_list {
		flex-wrap: wrap;
		justify-content: space-around;
		align-content: flex-start;
		color: rgba(50, 145, 248, 1);
		height: calc(100% - 11rem);
		margin-bottom: 2rem;
		overflow-y: auto;
		overflow-x: hidden;
		width: 100%;
	}

	.product_list:after {
		content: '';
		width: 17.2rem;
	}

	.product_item {
		position: relative;
		width: 17.2rem;
		height: 19rem;
		margin-bottom: 1.5rem;
		background: #FFFFFF;
	}

	.prePay {
		position: absolute;
		bottom: 1rem;
		left: 50%;
		width: 20rem;
		height: 3.5rem;
		transform: translateX(-50%);
		line-height: 3.5rem;
		border-radius: 60px;
		text-align: center;
		color: rgba(255, 255, 255, 1);
		font-size: 2rem;
		background-color: rgba(135, 227, 129, 1);
	}

	.month {
		height: 4.7rem;
		line-height: 4.7rem;
		width: 100%;
		font-size: 1.8rem;
		color: rgba(16, 16, 16, 1);
		border-bottom: 1px solid rgba(240, 240, 240, 1);
		box-sizing: border-box;
	}

	.hot {
		position: absolute;
		left: -0.2rem;
		top: -0.2rem;
		width: 4rem;
		height: 4rem;
	}

	.hot img {
		width: 100%;
		height: 100%;
	}

	.money {
		color: #FFB300;
		margin: 2rem 0 1.5rem 0;
		height: 5.4rem;
		line-height: 5.4rem;
		font-size: 3.6rem;
		font-weight: bold;
	}

	.hotColor {
		color: #FF6D3F;
	}

	.typeDesc {
		height: 2rem;
		line-height: 2rem;
		color: #36C12D;
		font-size: 1.4rem;
	}

	.pro_cont {
		height: calc(100% - 4.7rem);
		width: 100%;
	}

	.weui-icon-checked {
		display: inherit;
		font-size: 1.8rem;
	}

	.checkbox-tick {
		position: absolute;
		right: 0.2rem;
		top: 0.2rem;
	}

	.checkbox-tick .weui-icon-checked:before {
		content: '\EA01';
		color: #C9C9C9;
		display: block;
		margin-left: 0;
		margin-right: 0;
	}

	.checkbox-tick.checked .weui-icon-checked:before {
		content: '\EA06';
		color: #36C12D
	}

	.phone-tip {
		padding-top: 8rem;
		box-sizing: border-box;
		font-size: 2rem;
		color: rgba(16, 16, 16, 1);
	}

	.phone-tip img {
		width: 20rem;
		margin-bottom: 2rem;
	}
</style>
